<!doctype html>
<html ng-app>
  <head>
    <script src="http://code.angularjs.org/angular-1.0.0rc3.min.js"></script>
    <script src="http://documentcoud.github.com/underscore/underscore-min.js"></script>
    <script type="text/javascript" src="js/todo.js"></script>
    <link rel="stylesheet" href="todo.css">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
  </head>
  <body>
    <div ng-controller="TodoCtrl">
      <h2>Total todos: {{getTotalTodos()}}</h2>
      <ul class="unstyled">
        <li ng-repeat="todo in todos">
          <input type="checkbox" ng-model="todo.done">
          <span class="done-{{todo.done}}">{{todo.text}}</span>
        </li>
        <li>
          <input type="checkbox" disabled />
            {{formTodoText}}
        </li>
      </ul>
      <form class="form-horisontal">
        <input type"text" ng-model="formTodoText" ng-model-instant>
        <button class="btn" ng-click="addTodo()"><i class="icon-plus"></i> Add</button>
      </form>
      <button class="btn-large" ng-click="clearCompleted()"><i class="icon-trash"></i> Clear Completed</button>
    </div>
  </body>
</html>